<template>
  <div class="register">
    <canvas id="Mycanvas"></canvas>
    <!-- 顶部内容 -->
    <section class="header">
      <div class="flex-between header_box">
        <el-button type="text" @click="toLogin"><h6 >北京久感科技有限公司监测云平台</h6></el-button>
        <!--        <img src="~@/assets/images/logo.png" alt="">-->
        <p>已有账号？
          <el-button type="text" @click="toLogin" style="color:white">去登录</el-button>
        </p>
      </div>
    </section>

    <div class="box">
      <h6>账号注册</h6>
      <el-steps :active="stepActive" space="200" simple finish-status="success">
        <el-step title="单位信息" ></el-step>
        <el-step title="登录信息"></el-step>
      </el-steps>
      <!-- 步骤一  单位信息 -->
      <div v-show="stepActive === 0" class="box_wrap">
        <form-unit v-model="form" ref="formUnit" :queryDictData="queryDictData"></form-unit>
        <el-button size="medium" type="primary" class="stepNext"  @click="validatorForm('formUnit')" style="color:white">下一步</el-button>
      </div>

      <!-- 步骤二  登录信息 -->
      <div v-show="stepActive === 1" class="box_wrap">
        <form-principal v-model="form" ref="formPrincipal"></form-principal>
        <span style="margin:20px">
          <el-button size="medium" type="primary" plain @click="stepActive--">上一步</el-button>
          <el-button size="medium" type="success" @click="submitForm('formPrincipal')" :loading="isLoading">提交</el-button>
        </span>
      </div>

    </div>

  </div>
</template>

<script>
import FormUnit from './modules/form-unit'
import FormPrincipal from './modules/form-principal'
import {getDictData} from '@/services/model/common'
import {register} from '@/services/model/login'
import md5 from 'js-md5'
import canvasInit from "./canvas";

// 用户信息缓存
const USER_INFO = 'userInfo'
// 用户当前的操作步骤
const USER_ACTIVE_STEP = 'userActiveStep'

export default {
  components: {FormUnit,FormPrincipal},
  data() {
    return {
      // 单位请上传文件类型
      EnumUnitTypeList: [],
      // 当前步骤条进度
      stepActive: sessionStorage.getItem(USER_ACTIVE_STEP) ? JSON.parse(sessionStorage.getItem(USER_ACTIVE_STEP)) : 0,
      // 用户提交数据表单
      form: sessionStorage.getItem(USER_INFO) ? JSON.parse(sessionStorage.getItem(USER_INFO)) : {},
      // 接口是否正在加载
      isLoading: false
    }
  },
  watch: {
    // 由于表单内容过多，添加session缓存
    form: {
      handler(value) {
        sessionStorage.setItem(USER_INFO, JSON.stringify(value))
      },
      stepActive (value) {
        sessionStorage.setItem(USER_ACTIVE_STEP, JSON.stringify(value))
      },
      deep: true
    },

  },
  methods: {
    // 表单提交
    async submitForm(name) {
      this.$refs[name]._validatorForm().then((valid) => {
        if(!valid){
         return
        }
      })
      let { voucherList, region, password } = this.form
      voucherList = voucherList?.map(x => x.response.data.path)
      region = region.join('-')
      password = md5(password)
      let form = { ...this.form, voucherList, region, password, repeat: '' }
      this.isLoading = true
      try {
        await register(form)
        this.isLoading = false
        this.stepActive = 0
        this.form = {}
        this.$confirm('注册信息审核中，请等待短信通知。', '提示', {
          confirmButtonText: '去登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.toLogin()
        })
      } catch (error) {
        this.isLoading = false
      }
    },
    // 表单校验
    validatorForm (name) {
      this.$refs[name]._validatorForm().then((res) => {
        this.stepActive++
      })
    },
    // 去登录
    toLogin() {
      // 清楚缓存信息
      sessionStorage.removeItem(USER_INFO)
      // 清楚记录的步骤条
      sessionStorage.removeItem(USER_ACTIVE_STEP)
      this.$router.push('/login')
    },
    // 通用获取枚举方法
    async queryDictData(enumName, model) {
      const {data} = await getDictData({enumName})
      if (model) this[model] = data || []
      return data || []
    }
  },
  created() {
    // // 默认设置第一个值
    // this.queryDictData('EnumUnitType', 'EnumUnitTypeList').then(res => {
    //   if (!this.form.platformType) this.$set(this.form, 'platformType', res[0]?.code)
    // })
  },
  mounted() {
    let canvas = document.getElementById('Mycanvas')
    let context = canvas.getContext('2d')
    canvasInit(canvas, context)
    this.form = {}
  }
}
</script>

<style lang="less" scoped>
  .stepNext{
  }
  .el-button.el-button--medium {
    margin-top: 20px;
    padding: 10px 16px;
    border-radius: 8px;
    height: 36px;
    min-width: 36px;
    font-weight: 600;
    width: 180px;
    font-size: 17px;
    color: black;
  }

  .el-button--text {
    color: #4caf50;
  }

  #Mycanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    background: white !important;
  }

  .register {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;



    .header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 60px;
      background-color: #0d2234 !important;


      .header_box {
        height: 100%;
        margin: 0 auto;
        padding-right: 20px;
  p{
    color: #1990FE;
  }
        img {
          width: 200px;
        }
      }
    }
   h6 {
      text-align: center;
      font-size: 25px;
      font-weight: 600;
      color: #5dfff6;
      padding: 20px;

    }
    .box {
      text-align: -webkit-center;
      position: relative;
      top: 10%;
      margin: 0 auto;
      width: 660px;
      min-height: 400px;
      background-color: rgba(255, 255, 255);
      box-shadow: 0 0 5px 3px rgba(43, 115, 175, 1);
      border-radius: 8px;
      padding-bottom: 20px;
      opacity: 0.9;
      animation: fade_bottom 1.5s;
      @keyframes fade_bottom {
        from {
          transform: translateY(30px);
          opacity: 0.2;
        }
        to {
          transform: translateY(0px);
          opacity: 0.9;
        }
      }
      .box_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      & > h6 {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: #5dfff6;
        padding: 20px;
        background-color: #1b1b1b;

      }
      /deep/ .register_step {
        width: 400px;
        padding: 10px 3%;

        .is-simple:not(:last-of-type) .el-step__title {
          max-width: none;
        }

        .el-step__title.is-wait {
          color: #999;
        }

        .el-step__head.is-finish .el-step__icon {
          border-width: 8px;
        }

      }

      .el-form {
        margin-left: -15px;
        margin-top: 30px;
        width: 400px;
      }
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .fade-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    transform: translateX(-30px);
  }

  .service_check {
    .el-checkbox {
      margin-right: 10px;
    }

    .service_router {
      color: royalblue;
    }

    .el-button--text {
      color: #228af5;
    }
  }
   /deep/.el-step__title.is-process{
          color: #1990FE !important;
        }
   /deep/ .el-step__head.is-process{
          color: #1990FE !important;
          border-color:#1990FE  !important;

    }
</style>
